<template>
	<div class="order_page layer">
		<van-nav-bar :title="$t('trade.orderTitle')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="list_box">
			<van-list v-model="loading" :finished="tableNone" @load="onLoad">
				<div class="item_box" v-for="(item,index) in list" :key="index">
					<div class="coin_box">
						<div class="coin_title">
							<div class="coin_img">
								<img :src="item.source_icon_img" class="u_img" />
								{{item.source_name}}
							</div>
							<div class="money">
								{{item.from_money}}
							</div>
						</div>
						<img src="@/assets/images/trade/huan.png" class="huan" />
						<div class="coin_title">
							<div class="coin_img">
								<img :src="item.dist_icon_img" class="u_img" />
								{{item.to_name}}
							</div>
							<div class="money">
								{{item.to_money}}
							</div>
						</div>
					</div>
					<el-divider></el-divider>
					<div class="status_box">
						<div class="time">{{item.createtime}}</div>
						<div class="status">{{$t('success')}}</div>
					</div>
				</div>
				<div class="no_data" v-if="list && list.length <= 0 && !loading">
					<img src="@/assets/images/home/noData.png" class="img" />
					<p>{{$t('home.noData')}}</p>
				</div>
			</van-list>
		</div>
	</div>
</template>

<script>
	import {
		indexExchargeOrderList
	} from '@/api/home'
	export default {
		components: {},
		data() {
			return {
				page: 0,
				pagesize: 10,
				loading: false,
				tableNone: false,
				list: [],
			}
		},
		computed: {},
		watch: {},
		mounted() {},
		methods: {
			onLoad() {
				if (this.tableNone) return
				this.page++
				this.getList()
				// console.log('++++++++', this.page);
			},
			async getList() {
				if (this.tableNone) return
				this.loading = true
				const res = await indexExchargeOrderList({
					page: this.page,
					pagesize: this.pagesize,
				}).catch(err => this.loading = false)
				if (res && res.code == 1) {
					this.list = this.list.concat(res.data.data)
					if (this.page >= res.data.last_page) {
						this.tableNone = true;
					}
				} else {
					this.$toast.fail(res.msg)
				}
				this.loading = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.order_page {
		display: flex;
		flex-direction: column;
		min-height: 100vh;

		.list_box {
			flex: 1;
			min-height: 1px;

			.item_box {
				padding: 15px;
				border-radius: 16px;
				background-color: #3D3D3D;
				margin-bottom: 20px;

				.coin_box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.coin_title {
						.coin_img {
							display: flex;
							align-items: center;
							margin-bottom: 8px;

							.u_img {
								width: 20px;
								height: 20px;
								margin-right: 10px;
							}
						}

						.money {
							font-size: 16px;
						}
					}

					.huan {
						width: 20px;
						height: 20px;
					}
					.coin_title:last-of-type {
						.coin_img {
							justify-content: end;
						}
					}
				}
				
				

				.el-divider {
					margin: 15px 0;
					background-color: #020202;
					width: calc(100% + 30px);
					position: relative;
					left: -15px;
				}

				.status_box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.time {
						font-size: 12px;
						color: #999;
					}

					.status {
						font-size: 12px;
						color: #fff;
					}
				}
			}
		}
	}
</style>